<template>
	<view class="acqui_verification_code">
		<view class="verification_code_continor">
			<view
				v-for="(item, index) in latticeNum"
				:key="index"
				class="verification_code_item"
				:style="latticeSty(index)"
				@tap="latticeFoc(index)"
			>
				<template v-if="inputValues[index]">
					<view v-if="ciphertextSty == 1" class="point"></view>
					<template v-else>
						{{ ciphertextSty == 2 ? '*' : inputValues[index] }}
					</template>
				</template>
			</view>
		</view>
		<div class="input_info">
			<input class="input" :type="inputType" v-model="inputValues" focus maxlength="6" @input="inputVal" @blur="blur" @focus="focus" @keydown="limitInput" />
		</div>
	</view>
</template>

<script>
export default {
	props: {
		// input number
		latticeNum: {
			type: Number,
			default: 6
		},
		// input size
		latticeSize:{
			type:Number,
			default:60
		},
		borderStyle: {
			type: String,
			default: 'border: 1px solid #ccc;'
		},
		borderCheckStyle: {
			type: String,
			default: 'border: 1px solid #8D8BF6 !important;'
		},
		inputType: {
			type: String,
			default: 'number'
		},
		blurShow: {
			type: Boolean,
			default: false
		},
		// 1    2  *  0 number
		ciphertextSty: {
			type: Number,
			default: 1
		},
		updateOne: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			inputValues: '', // input value
			blurShowLocal: true
		};
	},
	mounted() {
		this.blurShowLocal = this.blurShow;
	},
	methods: {
		limitInput(event) {
			if (event.target.value.length >= this.latticeNum && event.keyCode !== 8) {
				event.preventDefault();
				event.stopPropagation();
			}
		},
		latticeSty(index){
			let str=this.blurShowLocal && (this.inputValues.length == index || (this.inputValues.length == this.latticeNum && index == this.latticeNum - 1)) ? this.borderCheckStyle : this.borderStyle
			str+=`;width:${this.latticeSize}rpx;height:${this.latticeSize}rpx`
			return str
		},
		// get Value
		getValue(){
			return this.inputValues
		},
		/**
		 * input change
		 */
		inputVal(e) {
			this.$emit('inputVerificationChange', this.inputValues);
		},
		// set input value
		/**
		 * verificationCodeValue
		 */
		setVerificationCode(verificationCodeValue) {
			if(!verificationCodeValue) return
			this.inputValues = verificationCodeValue;
		},
		/**
		 * clear value
		 */
		cleanVal() {
			this.inputValues = '';
		},
		latticeFoc(index) {},
		blur() {
			!this.blurShow ? (this.blurShowLocal = false) : '';
		},
		focus() {
			!this.blurShow ? (this.blurShowLocal = true) : '';
		}
	}
};
</script>

<style lang="less">
.acqui_verification_code {
	position: relative;
	.verification_code_continor {
		display: flex;
		justify-content: center;
		text-align: center;
		.verification_code_item {
			width: 60rpx;
			height: 60rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			display: flex;
			border-radius: 10rpx;
			background-color: #f5f5f5;
		}

		.verification_code_item:not(:first-child) {
			margin-left: 20rpx;
		}
		.point {
			width: 16rpx;
			height: 16rpx;
			background-color: black;
			border-radius: 200px;
		}
	}

	.input_info {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 8;
		display: flex;
		justify-content: center;
		opacity: 0;
		.input {
			width: 100%;
			height: 100%;
		}
	}
}
</style>
